<template>
  <div>
    <div class="rect2" ></div>
    <div class="wrap">
      <div class="qk-title flex-row-center-center" style="width:calc(100% + 2px);margin-left:-1px">
        <img src="@/assets/chevronRight.png" alt width="20" height="20" />
        <div v-if="selQk=='整体'">
            <router-link :to="{name:'overview',query:{name:'index',selTab:'库区概览',selType:'事故信息',selKq:selQk}}">
                <div class="qk-title-num flex-row-start-start" style="margin-left:0px">
                  <div>环空示踪剂 数量:</div>
                  <div style="color:#ffffff;margin-left:10px;border-bottom:2px solid #ffffff">{{jkxlNum}}</div>
                 <div style="margin-left:5px">个</div>
                </div>
            </router-link>
        </div>
        <div v-else>
             <router-link :to="{name:'overview',query:{name:'index',selTab:'特定库区',selType:'事故信息',selKq:selQk}}">
                <div class="qk-title-num flex-row-start-start" style="margin-left:0px">
                  <div>环空示踪剂 数量:</div>
                  <div style="color:#ffffff;margin-left:10px;border-bottom:2px solid #ffffff">{{jkxlNum}}</div>
                 <div style="margin-left:5px">个</div>
                </div>
            </router-link>
        </div>
        <img src="@/assets/chevronleft.png" alt width="20" height="20" />
      </div>
      <div  class="flex-row-center-center" style="height:181px">
        <div style="width:100%;height:100%" class="flex-row-center-center">
            <jk-pie id="jkxl"  ref="jkPie"></jk-pie>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import jkPie from '@/components/basic/chart/ring.vue'

export default {
    data(){
        return{
            update:0
        }
    },
    components:{
       jkPie   
    },
    props:{
      jkxlNum:Number,
      jkxlList:Array,
      selQk:String
    },
    watch:{
       jkxlList(val){
          this.$refs.jkPie.drawPie(val)
       }
    },
    mounted(){
        
    }
};
</script>
<style  scoped>
.qknum-content-value {
  color: black;
  font-size: 48px;
  text-align: center;
}
.qknum-content-unit {
  color: rgba(35, 125, 191, 100);
  font-size: 20px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}

.qknum-content-value {
  width: 100%;
  height: 45px;
  line-height: 20px;
  background-color: rgba(9, 48, 104, 100);
  text-align: center;
  /* border: 1px solid  rgba(9, 48, 104, 100); */
}
.wrap {
  width: 100%;
  height: 218px;
  line-height: 20px;
  opacity: 0.82;
  background-color: transparent;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(255,157,160, 60);
  font-family: Roboto;
  border: 1px solid    #cc0000;
}
</style>